麻豆文化传媒精品一区观看,精品日韩欧美一区二区在线播放,久久人人玩人妻潮喷内射人人,亚洲日韩成人无码不卡

for 知乎鏈接圖標抓取
UI 彈窗設計歸類小結
2025-07-03 16745 作者:
字號:【小】【中】【大】
分享到:

彈窗的定義

彈窗是中斷用戶當前操作并對其作出補充,或中斷用戶當前操作并對其作出反饋。 (官方定義如上,其實就是在我們?nèi)粘I钪校瑸g覽頁面時,看到“點擊領取好禮”“版本更新”“體驗金到手了,確定不要了嗎”等等) 

彈窗的分類

彈窗在交互中一般分為兩種形式:模態(tài)彈窗與非模態(tài)彈窗。

模態(tài)彈窗——用于強提醒,可以獲取用戶的視覺焦點。就像剛提到的“點擊領取好禮” “版本更新”,具有一定的強制性,打擾性,需要你點擊或者關閉。常規(guī)用于 「對話框」「表單彈窗」「項目選擇彈窗」「復雜信息展示」等。

非模態(tài)彈窗——與模態(tài)彈窗相反,它的優(yōu)點是更加溫和,不會打擾到用戶;缺點是展示時間短,不適合展示重要信息,承載常見的系統(tǒng)彈窗,常規(guī)用于 「系統(tǒng)通知」「全局提示」「警告提示」「氣泡卡片」「文字提示」等。 

DM_20250703134730_002.jpg

1、功能類彈窗 | Actionbar 

這類彈窗交互形式,通常由底部彈出,主要分為Action Views和Action Sheets。 

優(yōu)點:可以讓用戶清楚的感知當前的操作,比跳轉到新頁面更加有安全感。

DM_20250703134730_003.jpg

2、版本更新 | Dialog(Alerts)

版本升級彈窗,增加情感化設計,讓升級功能變得更有“溫度”。弱化告知按鈕,強化引導「立即更新」的動作按鈕。

DM_20250703134730_004.jpg

3、重要提示/信息二次確認 | Dialog(Alerts)

活動參與過程中,引導用戶去完成活動路徑,告知用戶相關信息,通過按鈕去強化引導。

DM_20250703134730_005.jpg

4、運營活動彈窗| Dialog(Alerts)

這類彈窗日常工作中接觸最多,常見于運營活動,包括領劵,激活,參與活動等動作,主要吸引用戶點擊進入這個動作,用于拉新或者活動引導轉化。在頁面設計上,需要更多考慮畫面設計感,造型多樣化,第一眼吸引人眼球。根據(jù)運營目的突出活動優(yōu)勢,強化按鈕或相關數(shù)字。

DM_20250703134730_006.jpg

5、快捷導航/彈出式氣泡 | Popover

這類彈窗,常常會讓人誤以為是“toast”,而popover屬于模態(tài)彈窗的一種。

彈出式氣泡——點擊某控件或區(qū)域彈出Popover后,Popover出現(xiàn)在使其觸發(fā)的控件附近,箭頭的指向可以引導用戶的注意力,而且把手指或鼠標指針從觸發(fā)控件移動到Popover的距離很近,操作非常順手、效率高。

快捷導航——將多個快捷功能入口收納到Popover中,通過“更多”、“加號”圖標觸發(fā)Popover,是國內(nèi)主流App常見的做法。

DM_20250703134730_007.jpg

6、Toast\HUD

Toast提示框是一種非模態(tài)彈窗,它彈出一個小信息,作為提醒或消息反饋。一般用來顯示操作結果,或者應用狀態(tài)的改變。常見的toast狀態(tài)如下: 

DM_20250703134730_008.jpg

7、消息通知模塊——Snackbar 

Snackbar和toast比較相似,比較相似,通常用于低干擾度的消息提示。該消息可被忽略且不會打斷用戶當前的操作。但相對 Toast 而言,Snackbar 的優(yōu)勢在于可讀性更強,還可以兼容 1-2 個次要操作,適用場景會更加廣泛,比 Toast 好用太多了。 

DM_20250703134730_009.jpg

最后:使用彈窗要克制,并不是所有的彈窗設計都會被用戶接受,特別是廣告類彈窗常常會被用戶所厭惡,使用時要考慮信息內(nèi)容的必要性和目的性(商業(yè)推廣或者增值服務等目的),溝通確定其內(nèi)容的重要程度,再選擇使用最優(yōu)樣式的彈窗設計。


最新標簽
最新更新
我要試用
驗證碼
獎勵領取
驗證碼
關注或聯(lián)系我們

微信公眾號

業(yè)務咨詢:400-9969-069(24小時服務) 028-86052918
售后熱線:028-86052836
公司地址:成都市武侯區(qū)天益街38號理想中心3棟1810

在線客服
Copyright? 2022天健世紀. All Rights Reserved. 蜀ICP備16016808號
for 知乎鏈接圖標抓取
×
快速定制通道
獲取驗證碼
快速咨詢